<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>

	</style>
</head>
<body>
<div class="page">
	<form class="layui-form  fx-col" id="form" lay-filter="form_filter">

		<input type="hidden" name="student.id" value="${student.id}"/>
		<div class="layui-form-item">
			<label class="layui-form-label">学生姓名</label>
			<div class="layui-input-block">
				<input type="text" name="student.name" id="name" required  lay-verify="required" placeholder="请输入名称"
					   autocomplete="off" class="layui-input" value="${student.name}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">学生学号</label>
			<div class="layui-input-block">
				<input type="text" name="student.sn" id="phone" required  lay-verify="required" placeholder="请输入学号"
					   autocomplete="off" class="layui-input" value="${student.sn}">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">学生性别</label>
			<div class="layui-input-block">
				<input type="radio" name="student.sex" value="男" title="男" ${(student == null || student.sex=="男")?"checked":""}>
				<input type="radio" name="student.sex" value="女" title="女" ${student.sex=="女" ? "checked":""}>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所在班级</label>
			<div class="layui-input-block">
				<select name="student.gradeId" lay-verify="required|number" id="grade">
					<option value="">选择年级</option>
				</select>
				<select name="student.classId" lay-verify="required|number" id="clazz">
					<option value="">选择班级</option>
				</select>
			</div>
		</div>

		<button  lay-submit="" class="layui-btn mt-15" id="save_btn" type="button">保存</button>
	</form>
</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>

<script>

	/**
	 * 加载年级
	 */
	function loadGradeOptions() {
		$.ajax({
			url: "grade/list",
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择年级"});
				var content = list.map(item => {
					return `<option value="${"${item.id}"}">${"${item.name}"}</option>`
				}).join("");
				$("#grade").html(content);
				layui.form.render('select');



				<c:if test="${student != null}">
					layui.form.val("form_filter",{
						"student.gradeId":"${student.gradeId}"
					})
					loadClassOptions();
				</c:if>


			}
		})
	}

	//是否已初始化过
	var hasInited = false;

	/**
	 * 加载班级
	 */
	function loadClassOptions() {

		var gradeId = $("#grade").val();
		var content = "";
		if (!gradeId) {
			content = '<option value="">选择班级</option>';
			$("#clazz").html(content);
		} else {
			$.ajax({
				url: "clazz/list?gradeId="+gradeId,
				dataType: "json",
				success(res) {
					let list = res.data;
					list.unshift({id:"", name:"选择班级"});
					var content = list.map(item => {
						return `<option value="${"${item.id}"}">${"${item.name}"}</option>`
					}).join("");
					$("#clazz").html(content);
					layui.form.render('select');


					<c:if test="${student != null}">
						if(hasInited == false) {
							layui.form.val("form_filter",{
								"student.classId":${student.classId}
							})
							hasInited = true;
						}
					</c:if>
				}
			})


		}

	}



	$(function () {
		var form = layui.form;

		form.on('select()', function(data){
			if($(data.elem).attr("id") == "grade" ) {
				loadClassOptions();
			}

		});



		//监听提交
		form.on('submit()', function(data){
			$.ajax({
				url: "student/save",
				type: "post",
				data: $("#form").serialize(),
				dataType: "json",
				success(res) {
					if (res.success) {
						layer.msg('保存成功', {icon: 6}, function () {
							window.parent.search();
						});

					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}

			})
			return false;
		});

		loadGradeOptions();

	})
</script>
</html>
